<template>
  <aside class="app-sidebar bg-body-secondary shadow h-100" data-bs-theme="dark">
    <div class="sidebar-brand">
      <span class="brand-text fw-light">后台管理系统</span>
    </div>
    <!--begin::Sidebar Wrapper-->
    <div class="sidebar-wrapper">
      <nav class="mt-2">
        <ul
          class="nav sidebar-menu flex-column"
          data-lte-toggle="treeview"
          role="menu"
          data-accordion="false"
        >
          <li class="nav-item" v-for="item in menus" :key="item.id">
            <router-link class="nav-link align-items-center" aria-current="page"
              :to="item.routeName ? { name: item.routeName } : item.path">
              <i :class="['fas', item.icon]"></i>
              <p>{{ item.name }}</p>
              </router-link>
          </li>
        </ul>
      </nav>
    </div>
    <!--end::Sidebar Wrapper-->
  </aside>
</template>

<script lang="ts">
import { PropType } from 'vue';
import { defineComponent } from 'vue'
import { MenuItem } from './types/SidebarNav'

export default defineComponent({
  props: {
    menus: {
      type: Array as PropType<Array<MenuItem>>,
      default: () => [] as MenuItem[]
    }
  },
  setup() {


    return {}
  }
})
</script>

<style scoped></style>
